require('./PageLogin.styl');
import { Control } from 'react-keeper'
import { monStorage, Storage } from 'clientConfig/util/StoreData';
const reactMixin = require('react-mixin');
const Actions = require('./actions');
const Store = require('./store');
const Arrow = require('images/svg/arrow.svg')
const { Boxs, Button, Group, TextField, Toast, SelectField, Avatar, DatetimeField } = SaltUI;
const Loginlogo = require('images/svg/login.svg');
const ui = require('clientConfig/util/jsapi/ui')
let HBox = Boxs.HBox;
let Box = Boxs.Box;
var list = [];//资料数据
var keys = ["name", "nickname", "tel", "intuid", "sex", "birthday", "location", "corp", "email", "headimg"];
const avatarColors = ['#78C06E', '#3BC2B5', '#78919D', '#5EC9F6', '#F6BF26'];
class Login extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            value: null,
            content: [],
            src: ''
        };
        this.content = ['姓名', '昵称', '手机号', '云途号', '性别', '生日', '地区', '所在单位', '邮箱', '头像']
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick(index) {
        (index == 0 || index == 1 || index == 7 || index == 8)
            && Control.go('/bind/modify/fillInfo/' + index + '/0');
        index == 4 && Control.go('/bind/modify/selectInfo/' + index + '/0/0');
        index == 6 && Control.go('/bind/modify/selectmultiInfo' + '/0');
        let modified = Storage.set('user.modified');
        if (index == 3) {
            if (!modified) {
                Control.go('/bind/modify/fillInfo/' + index + '/0')
            }
        }
    }
    //用户资料填充
    handleSumbmit() {
        //  alert(JSON.stringify(list[5]))
        // alert(typeof list[5].content)
        Actions.submit(list);
    }
    //日期选择
    handleChange(field, value) {
        console.log(value)
        this.setState({
            [field]: value
        });
        let id = 5;
        list[id].content = value.toString();
        list[id].modify = true;
        list[id].key = keys[id];

    }
    clickHead() {
        let t = this;
        dd.biz.util.uploadImage({
            multiple: false, //是否多选，默认false
            max: 1, //最多可选个数
            onSuccess: function (result) {
                t.setState({ src: result })
                let id = 9;
                list[id].content = result[0];
                list[id].modify = true;
                list[id].key = keys[id];
                // alert(typeof result)
            },
            onFail: function (err) { alert(err) }
        })
    }
    render() {
        let t = this;
        return (
            <div className="homelogin">
                {t.state.content&&<div className='t-FAC t-MT18 t-MB7' onClick={this.clickHead.bind(this)}>
                    <Avatar
                        src={this.state.src}
                        name="上传头像"
                        size={66}
                    />
                </div>}
                {t.state.content && t.state.content.map((item, index) => {
                    if (index == t.state.content.length - 1) return;
                    if (index == 5) {
                        return (
                            <HBox vAlign='center' style={{ borderBottom: '1px solid #E6E5E6' }}>
                                <Box flex={2}>
                                    <DatetimeField
                                        columns={['年', '月', '日']}
                                        label="生日"
                                        onSelect={t.handleChange.bind(t, 'value')}
                                        value={t.state.value}
                                        placeholder="未设置"
                                        className='fs14 t-FAR'
                                    />
                                </Box>
                                <Box flex={0.8}>
                                    <Arrow width={8} height={16}
                                        className='t-MR15'
                                    />
                                </Box>
                            </HBox>)
                    } else {
                        return (
                            <HBox vAlign='centre' className='content-list' onClick={() => { this.handleClick(index) }}>
                                <Box flex={0.5}>{item.title}</Box>
                                <Box flex={1} className='t-FAR t-MR12 fs14 omit' style={{ color: '#7F7F7F' }}>{item.content}</Box>
                                <Box flex={0.5} className='t-MR15'><Arrow width={8} height={16} /></Box>
                            </HBox>)
                    }
                })}
                <div><div className="putin t-FAC" onClick={this.handleSumbmit.bind(this)}>提交</div></div>
            </div>
        );
    }
    setui() {
        ui.setNavigationRight({ text: ' ', control: false, show: false });
    }
    componentWillMount() {
        ui.setLeft({ control: true, text: '返回' }, (isSuccessed, result) => {
            ui.close();
        })
    }

    componentDidMount() {
        if (list.length == 0) {
            let jsondata = Storage.get('user.info');
            Storage.set('user.modifyed', jsondata.user.modified);
            let data = jsondata.user;
            let ding_data = jsondata.ding;
            let a = [];
            for (let key in this.content) {
                let obj = {};
                obj.title = this.content[key];
                obj.content = data[keys[key]] == '' ? (!ding_data[keys[key]] ? '未设置' : ding_data[keys[key]]) : data[keys[key]];
                a.push(obj)
            }
            list = a;
            list[9].content = data[keys[9]] == '' ? (!ding_data[keys[9]] ? ding_data["avatar"] : ding_data[keys[9]]) : data[keys[9]];//"https://img.alicdn.com/tps/TB1amOaKpXXXXbsXVXXXXXXXXXX-144-144.png"; 
            list[7].content = data[keys[7]] == '' ? (!ding_data[keys[7]] ? ding_data["corp_name"] : ding_data[keys[7]]) : data[keys[7]];
            // console.log(list)
        } else {
            if (Control.state) {
                let id = parseInt(Control.state.id)
                if (id.toString().length == 6)
                    id = 6;
                list[id].content = Control.state.content;
                list[id].modify = true;
                list[id].key = keys[id];
            }
        }
        this.setState({ content: list, src: list[9].content, value: parseInt(list[5].content) })
        // console.log(Control.state)
        this.setui();
    }

    componentWillReceiveProps(nextProps) {
    }

    shouldComponentUpdate(nextProps, nextState) {
        return true;
    }

    componentWillUpdate(nextProps, nextState) {
    }

    componentDidUpdate(prevProps, prevState) {

    }

    componentWillUnmount() {
        ui.setLeft({ control: false, text: '返回' })
    }
}

reactMixin.onClass(Login, Reflux.connect(Store, 'Login'));

module.exports = Login;
